<template>
    <div id='about'>
        <div class="about__header">
            <span class="about__logo"><img width="120" :src="logoUrl" alt=""></span>
            <p class="about__title">{{ configInfo.appName }}</p>
            <div class="email">
                <p>Email</p>
                <a :href="'mailto:'+configInfo.appEmail">{{ configInfo.appEmail }}</a>
            </div>
        </div>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import radio from '../components/Radio.vue'
    import contact from '../components/Contact.vue'
    import checkBox from '../components/CheckBox.vue'
    import { getOS } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            contact,
            checkBox
        },
        data() {
            return {
                imgUrl:require('../images/loading_1.png')
            }
        },
        computed:{
            ...mapGetters([
                'loading',
                'msgTip',
                'localInfo',
            ]),
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            logoUrl(){
                return this.configInfo.logoUrl || this.imgUrl
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMsgTipStyle',
                'setSessionId',
            ]),
            currentRouter(item){
                let routerArr = this.$route.matched
                let matchRouter = _.some(routerArr,['name',item.router])
                return matchRouter
            },
            goRouter(item,isSub){
                let thisRouter
                let routers = item.subRouters

                if(isSub === 'sub'){
                    if(this.$route.name == item) return
                    this.$router.push(item)
                    return
                }

                if(routers.length > 1){
                    item.opened = !item.opened
                    return
                }

                thisRouter = routers[0]
                if(this.$route.name == thisRouter.name) return
                this.$router.push(thisRouter)
            },
            goLogin(){
                // this.setSessionId('')
                this.$router.push({
                    name:'login'
                })
            }
        },
        created(){
            // this.setMsgTipStyle({ top:'100px' })
        },
        watch: {
            'needLogin'(newVal,oldVal){
                if(newVal == oldVal) return
                if(newVal === true)
                this.$router.replace({
                    name:'login'
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #about{
        
        .about__header{
            text-align: center;
            padding:80px 0 50px 0;
        }
        .about__logo{
            width: 120px;
            height: 120px;
            display: block;
            margin:0 auto;
            overflow:hidden;
        }
        .about__title{
            @extend %font-title;
            padding:10px 0;
            color:$importColor;
        }
        .about__slogen{
            @extend %font-caption;
            font-size: 14px;
            width: 200px;
            margin:0 auto;
            padding:0 0 50px 0;
        }
        .email{
            a{
                display: block;
                text-align: center;
                padding:5px;
                color:$red;
            }
        }
    }
</style>
